<script lang="tsx" setup>
// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 模块导入 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

import { ref, shallowRef } from 'vue';
import { getInfo, homeMonthSamplingTrend, homeUser, options } from '@/service/api';
import LineChart from '../home/modules/line-chart.vue';
// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 常量、类型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组合式函数 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++
const positionType = ref<string>('0');
const selectedProjectId = ref<string>('');
const projectOptions = shallowRef<CommonType.Option[]>([]);

const samplingCountData = ref<Api.Home_Analysis.CjAnalysisHomeSamplingCountVO>({
  yearPlanCount: 0,
  yearSamplingCount: 0,
  yearSamplingPercent: '', // monthSamplingPercent: '',
  daySamplingCount: 0,
  yearUnfinishedCount: 0
});

const userData = ref<Api.Home_Analysis.CjAnalysisHomeUserVO>({
  monthLiveUserCount: 0,
  monthLiveUserPercent: '',
  month: ''
});

const monthSamplingTrendData = ref<Api.Home_Analysis.CjAnalysisHomeMonthSamplingTrendVO>({
  days: [], //
  counts: []
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

function handleSelectPositionType(val: string) {
  positionType.value = val;
  search();
}

/**
 * 年度完成数据
 *
 * @returns 无返回值
 */
async function getInfoList() {
  const { error, data } = await getInfo({
    projectId: selectedProjectId.value, //
    positionType: positionType.value
  });
  if (!error && data) {
    samplingCountData.value = data;
  }
}

async function user() {
  const { error, data } = await homeUser({
    projectId: selectedProjectId.value, //
    positionType: positionType.value
  });
  if (!error && data) {
    userData.value = data;
  }
}

async function monthSamplingTrend() {
  const { error, data } = await homeMonthSamplingTrend({
    projectId: selectedProjectId.value,
    positionType: positionType.value
  });
  if (!error && data) {
    monthSamplingTrendData.value = data;
  }
}

async function search() {
  if (selectedProjectId.value === '') {
    return;
  }
  getInfoList();
  user();
  monthSamplingTrend();
}

async function initAllProjectList() {
  const { error, data } = await options();
  if (!error && data) {
    projectOptions.value = data;
    if (data.length > 0) {
      selectedProjectId.value = data[data.length - 1].value;
      search();
    } else {
      selectedProjectId.value = '';
    }
  }
}

initAllProjectList();
</script>

<template>
  <NSpace vertical :size="16">
    <NCard :bordered="false" size="small" class="card-wrapper">
      <NFlex>
        <NButtonGroup size="small">
          <NButton :type="positionType === '0' ? 'primary' : 'default'" @click="handleSelectPositionType('0')">&nbsp;&nbsp;全部点&nbsp;</NButton>
          <NButton :type="positionType === '1' ? 'primary' : 'default'" @click="handleSelectPositionType('1')">&nbsp;国控点&nbsp;</NButton>
          <NButton :type="positionType === '2' ? 'primary' : 'default'" @click="handleSelectPositionType('2')">&nbsp;省控点&nbsp;&nbsp;</NButton>
        </NButtonGroup>
        <NSelect v-model:value="selectedProjectId" size="small" :options="projectOptions" class="w-250px" @update:value="search" />
      </NFlex>
    </NCard>
    <NGrid x-gap="8" :cols="4" class="mt-8px">
      <NGi>
        <NCard
          :title="`年度已完成：${samplingCountData.yearSamplingCount}`"
          :segmented="{
            content: true,
            footer: 'soft'
          }"
        >
          <template #header-extra>
            <NTag type="info" size="small">全年</NTag>
          </template>
          <div>
            <div class="text-26px">{{ samplingCountData.yearPlanCount }}</div>
            <NFlex justify="space-between">
              <div class="text-12px color-#797979">年度计划总采样量</div>
              <div class="text-12px color-#646cff">{{ samplingCountData.yearSamplingPercent }}</div>
            </NFlex>
          </div>
        </NCard>
      </NGi>
      <NGi>
        <NCard
          :title="`本月采样量：${samplingCountData.monthSamplingCount}`"
          :segmented="{
            content: true,
            footer: 'soft'
          }"
        >
          <template #header-extra>
            <NTag type="info" size="small">月</NTag>
          </template>
          <div>
            <div class="text-26px">{{ samplingCountData.yearSamplingCount }}</div>
            <NFlex justify="space-between">
              <div class="text-12px color-#797979">已完成总量</div>
              <div class="text-12px color-#646cff">{{ samplingCountData.monthSamplingPercent }}</div>
            </NFlex>
          </div>
        </NCard>
      </NGi>
      <NGi>
        <NCard
          :title="`当日采样量：${samplingCountData.daySamplingCount}`"
          :segmented="{
            content: true,
            footer: 'soft'
          }"
        >
          <template #header-extra>
            <NTag type="info" size="small">今天</NTag>
          </template>
          <div>
            <div class="text-26px">{{ samplingCountData.yearUnfinishedCount }}</div>
            <NFlex justify="space-between">
              <div class="text-12px color-#797979">未完成总量</div>
              <div class="text-12px color-#646cff">{{ samplingCountData.daySamplingPercent }}</div>
            </NFlex>
          </div>
        </NCard>
      </NGi>
      <NGi>
        <NCard
          title="活跃用户"
          :segmented="{
            content: true,
            footer: 'soft'
          }"
        >
          <template #header-extra>
            <NTag type="error" size="small">最近一个月</NTag>
          </template>
          <div>
            <div class="text-26px">{{ userData.monthLiveUserCount }}</div>
            <NFlex justify="space-between">
              <div class="text-12px color-#797979">{{ userData.month }}月</div>
              <div class="text-12px color-#646cff">{{ userData.monthLiveUserPercent }}</div>
            </NFlex>
          </div>
        </NCard>
      </NGi>
    </NGrid>
    <NCard class="mt-8px" :title="`采样量统计（${userData.month}月）`" :segmented="{ content: true, footer: 'soft' }"></NCard>

    <LineChart :data="monthSamplingTrendData" />
  </NSpace>
</template>

<style scoped></style>
